<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function load(){
				let c = document.getElementById('myC');
				let ctx = c.getContext('2d');

				ctx.fillStyle="#F00";
				ctx.fillRect(50,25,100,100);
				ctx.fillStyle="#0F0";

				/* source: 后画的部分
				 * destination：先画的部分
				 */

				ctx.globalCompositeOperation="source-over";
				ctx.globalCompositeOperation="destination-over";
				ctx.globalCompositeOperation="source-atop";
				ctx.globalCompositeOperation="destination-atop";
				ctx.globalCompositeOperation="source-in";
				ctx.globalCompositeOperation="destination-in";
				ctx.globalCompositeOperation="source-out";
				ctx.globalCompositeOperation="destination-out";
				ctx.globalCompositeOperation="xor";

				ctx.beginPath();
				ctx.arc(150,125,50,0,Math.PI*2,true);
				ctx.closePath();
				ctx.fill();

			}

			window.onload = function(){
				load();

			}
		</script>
	</head>
	<body>
		<canvas id="myC" style="border: 1px #000 solid;" width="800" height="450">
			你的浏览器不支持canvas元素！
		</canvas>
	<div><script language="javascript">

	</script></div></body>
</html>
